﻿@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.CarouselsModel
@{
    ViewData["Title"] = "Carousels";
}

@section styles {
    <abp-style-bundle>
        <abp-style src="/css/demo.css" />
    </abp-style-bundle>
}

@section scripts {
    <abp-script-bundle>
        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
            <abp-script src="/Pages/Components/highlightCode.js" />*@
    </abp-script-bundle>
}

<link rel="stylesheet"
      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>


<h2>Carousels</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/carousel/" target="_blank"> Bootstrap Carousel</a>.</p>

<h4>Slides only</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel indicators="false" controls="false">
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot; controls=&quot;false&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleSlidesOnly&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With controls</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel indicators="false">
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With indicators</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With captions</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel>
            <abp-carousel-item caption-title="Second slide label" caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit." src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel&gt;
    &lt;abp-carousel-item caption-title=&quot;Second slide label&quot; caption=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot; src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-target=&quot;#carouselExampleIndicators&quot; data-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
        &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
            &lt;h5&gt;Second slide label&lt;/h5&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Crossfade</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel indicators="false" crossfade="true">
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3EFirst slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb712 text %7B fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb712&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23666&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;247.2916717529297&quot; y%3D&quot;218.3&quot;%3ESecond slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
            <abp-carousel-item src="data:image/svg+xml;charset=UTF-8,%3Csvg width%3D&quot;800&quot; height%3D&quot;400&quot; xmlns%3D&quot;http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg&quot; viewBox%3D&quot;0 0 800 400&quot; preserveAspectRatio%3D&quot;none&quot;%3E%3Cdefs%3E%3Cstyle type%3D&quot;text%2Fcss&quot;%3E%23holder_16343cfb714 text %7B fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C monospace%3Bfont-size%3A40pt %7D %3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg id%3D&quot;holder_16343cfb714&quot;%3E%3Crect width%3D&quot;800&quot; height%3D&quot;400&quot; fill%3D&quot;%23555&quot;%3E%3C%2Frect%3E%3Cg%3E%3Ctext x%3D&quot;276.9749984741211&quot; y%3D&quot;218.3&quot;%3EThird slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot; crossfade=&quot;true&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleFade&quot; class=&quot;carousel slide carousel-fade&quot; data-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...e&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

